/*
import { React } from 'react';
  学习目标：使用setState修改状态
*/
import React from 'react';
export default class App extends React.Component {
  state = {
    msg: 'Hello 69',
    count: 0,
  };

  render() {
    return (
      <div>
        <h1>{this.state.msg}</h1>
        <h2>{this.state.count}</h2>
        <button onClick={this.handleClick}>点我改变msg</button>
        <button onClick={this.handleClickCount}>点我改变count</button>
      </div>
    );
  }

  handleClick = () => {
    console.log('this.state.msg -->', this.state.msg);
    this.setState({
      msg: 'hello 666',
    });
  };

  handleClickCount = () => {
    // 👍 使用新值覆盖旧值
    this.setState({
      count: this.state.count + 1,
    });
    // 💥 React中强调不可变数据，不允许直接修改state中的数据
    // 下方全是错误的写法
    // ❌
    // this.count++;
    // ❌
    // this.setState({
    //   count: this.state.count++,
    // });
  };
}
